<template>
  <div>

    <Panel title="充电枪控制" useBack>
      <div slot="body">
        <div class="main-box">
          <!-- <div class="btn-box"><el-button type="primary" @click="controlReset">控制板复位<i class="el-icon-s-tools el-icon--right"></i></el-button></div>
          <div class="btn-box"><el-button type="primary" @click="crashStop">急停<i class="el-icon-switch-button el-icon--right"></i></el-button></div>
          <div class="btn-box"><el-button type="primary" @click="recovery">急停恢复<i class="el-icon-refresh el-icon--right"></i></el-button></div>
          <div class="btn-box"><el-button type="primary" @click="restart">重启<i class="el-icon-refresh-right el-icon--right"></i></el-button></div>
          <div class="btn-box"><el-button type="primary" @click="resume">恢复充电<i class="el-icon-refresh el-icon--right"></i></el-button></div>
          <div class="btn-box"><el-button type="primary" @click="shutdown">关机<i class="el-icon-switch-button el-icon--right"></i></el-button></div>
          <div class="btn-box"><el-button type="primary" @click="stop">停止充电<i class="el-icon-remove-outline el-icon--right"></i></el-button></div>
          <div class="btn-box"><el-button type="primary" @click="suspend">暂停充电<i class="el-icon-video-play el-icon--right"></i></el-button></div>
          <div class="btn-box"><el-button type="primary" @click="timeSync">时间同步<i class="el-icon-time el-icon--right"></i></el-button></div>
          <div class="btn-box"><el-button type="primary" @click="unlock">强制解锁<i class="el-icon-unlock el-icon--right"></i></el-button></div> -->
          <div class="btn-box"><el-button type="success" @click="editUp('sn_')">设置充电桩编码<i class="el-icon-edit el-icon--right"></i></el-button></div>
          <div class="btn-box"><el-button type="success" @click="editUp('ip_')">设置充电桩IP<i class="el-icon-edit el-icon--right"></i></el-button></div>
          <div class="btn-box"><el-button type="success" @click="editUp('port_')">设置充电桩端口<i class="el-icon-edit el-icon--right"></i></el-button></div>
        </div>
      
      </div>
        
    </Panel>
    <ModalPanel
     :visible='visible'
      :title="title"
      :onCancel="onCancel"
      class="bannerDialog"
      :onOk="onSubmit">
      <ModifyForm
        :hiddenBtn='true'
        :editColumn='editColumn'
        :updateData="updateData"
        labelWidth='100px'
        ref="configModal"
        class="ModifyForm"
        :temporaryData='modalData'>
      </ModifyForm>
    </ModalPanel>
  </div>
</template>
<script>
import Panel from "@/components/Panel";
import request from "@/tools/request";
import ModifyForm from "@/components/ModifyForm";
import ModalPanel from "@/components/ModalPanel";
export default {
  name:'gunControl',
  components: {
    Panel,
    ModalPanel,
    ModifyForm
  },
  data() {
    return {
      visible: false,
      modalData:{},
      configValue:"",
      editorOption: {},
      typeList: [],
      temporaryData: {
        coverImg: [],
        publishStatus: false
      },
      gunId: '',
      sn: '',
      type: '',
      editColumn: [
      ],
      sn_: [{
          name: "充电枪编号",
          prop: "sn",
          type: "text",
          width:12,
          required: true
        }],
      ip_: [{
          name: "充电枪IP",
          prop: "ip",
          type: "text",
          width:12,
          required: true
        }],
      port_: [{
          name: "充电枪端口",
          prop: "port",
          type: "text",
          width:12,
          required: true
        }],
      title:'编辑'
    };
  },
  computed: {
 

  },
  methods: {
    updateData(values) {
     if(this.type == 'sn_'){
       this.setPileSN(values.sn)
     }else if(this.type == 'ip_'){
       this.setServerIP(values.ip)
     }else{
       this.setServerPort(values.port)
     }
    },
    async onSubmit(){
      this.$refs['configModal'].onSubmit()
    },
    
    async fetchData(){
      let { template } = await request({
        url: "/iot/pile/gun/info/"+this.gunId,
        method: "GET",
        data: {}
      });
      this.temporaryData = template
    },
   async controlReset(){
      let res = await request({
        url: "/iot/pile/gun/control/controlReset/"+this.sn,
        method: "GET",
        data: {}
      });
      if ( res.code !== 0) return
      this.$message.success('操作成功')
    },
    async crashStop(){
      let res = await request({
        url: "/iot/pile/gun/control/crashStop/"+this.sn,
        method: "GET",
        data: {}
      });
      if ( res.code !== 0) return
      this.$message.success('操作成功')
    },
    async recovery(){
      let res = await request({
        url: "/iot/pile/gun/control/recovery/"+this.sn,
        method: "GET",
        data: {}
      });
      if ( res.code !== 0) return
      this.$message.success('操作成功')
    },
    async resume(id){
      let res = await request({
        url: "/iot/pile/gun/control/resume/"+this.sn,
        method: "GET",
        data: {}
      });
      if ( res.code !== 0) return
      this.$message.success('操作成功')
    },
    async restart(){
      let res = await request({
        url: "/iot/pile/gun/control/restart/"+this.sn,
        method: "GET",
        data: {}
      });
      if ( res.code !== 0) return
      this.$message.success('操作成功')
    },
    async shutdown(){
      let res = await request({
        url: "/iot/pile/gun/control/shutdown/"+this.sn,
        method: "GET",
        data: {}
      });
      if ( res.code !== 0) return
      this.$message.success('操作成功')
    },
    async stop(){
      let res = await request({
        url: "/iot/pile/gun/control/stop/"+this.sn,
        method: "GET",
        data: {}
      });
      if ( res.code !== 0) return
      this.$message.success('操作成功')
    },
    async suspend(){
      let res = await request({
        url: "/iot/pile/gun/control/suspend/"+this.sn,
        method: "GET",
        data: {}
      });
      if ( res.code !== 0) return
      this.$message.success('操作成功')
    },
    async timeSync(){
      let res = await request({
        url: "/iot/pile/gun/control/timeSync/"+this.sn,
        method: "GET",
        data: {}
      });
      if ( res.code !== 0) return
      this.$message.success('操作成功')
    },
    async unlock(){
      let res = await request({
        url: "/iot/pile/gun/control/unlock/"+this.sn,
        method: "GET",
        data: {}
      });
      if ( res.code !== 0) return
      this.$message.success('操作成功')
    },
    //
    async setPileSN(value){
      this.title = '设置充电桩编码'
      let res = await request({
        url: "/iot/pile/gun/control/setPileSN",
        method: "POST",
        data: {
          sn: this.sn,
          newSn: value
        }
      });
      if ( res.code !== 0) return
      this.$message.success('操作成功')
      this.sn = value
    },
    async setServerIP(value){
      let res = await request({
        url: "/iot/pile/gun/control/setServerIP",
        method: "POST",
        data: {
          sn: this.sn,
          ip: value
        }
      });
      if ( res.code !== 0) return
      this.$message.success('操作成功')
    },
    editUp(name){
      if(name == 'sn_'){
        this.title = '设置充电桩编码'
        this.editColumn = this.sn_
      }else if(name == 'ip_'){
        this.title = '设置充电桩IP'
        this.editColumn = this.ip_
      }else{
        this.title = '设置充电桩端口'
        this.editColumn = this.port_
      }
      this.type = name
      this.visible = true
    },
     onCancel(){
      this.visible = false
    },
    async setServerPort(value){
      let res = await request({
        url: "/iot/pile/gun/control/setServerPort",
        method: "POST",
        data: {
          sn: this.sn,
          port: value
        }
      });
      if ( res.code !== 0) return
      this.$message.success('操作成功')
      this.visible = false
    },
  },
  created() {
    if(this.$route.query.id)
    this.gunId = this.$route.query.id
    this.sn = this.$route.query.sn
    this.fetchData()
  }
};
</script>

<style lang='scss'>
.main-box {
  display: flex;
  padding: 50px;
  flex-wrap: wrap;
  .btn-box {
    margin-right: 20px;
    margin-bottom: 20px;
  }
}
</style>